<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <book-list color="blue" title="武侠小说" :book-info="wuxia"></book-list>
        <book-list color="pink" title="言情小说" :book-info="yanqing"></book-list>
        <book-list color="orange" title="玄幻小说" :book-info="xuanhuan"></book-list>
    <!--  传字符串 color="blue"

          传变量 :book-info="wuxia" 武侠是一个变量
      -->
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            wuxia:[
                {
                    id:1,
                    bookName:"鹿鼎记",
                    author:"金庸"
                },{
                    id:2,
                    bookName: "圆月弯刀",
                    author: "古龙"
                }
            ],
            yanqing:[
                {
                    id: 3,
                    bookName: "情深深雨濛濛",
                    author: "琼瑶"
                },{
                    id:4,
                    bookName: "明朝王爷爱上我",
                    author: "佚名"
                }
            ],
            xuanhuan:[
                {
                    id:5,
                    bookName:"斗罗大陆",
                    author:"唐家三少"
                },{
                    id:6,
                    bookName: "吞噬星空",
                    author: "我吃西红柿"
                }
            ]
        },
        components:{
            BookList:{
                props:{
                    bookInfo:{
                        type:Array,
                        required:true
                    },
                    title:String,
                    color:{
                        type:String,
                        default:"yellow"
                    }
                },
                template:(`
                    <div>
                        <h3 :style="{color}">{{title}}</h3>
                        <div v-for="item in bookInfo" :key="item.id">
                            <p>{{item.bookName}}--{{item.author}}</p>
                        </div>
                        <hr/>
                    </div>
                `)
            }
        }
    })
</script>
</html>